<template>
<div class="main-wrap">
    <!-- <div v-if="goodList.length>0"> -->
        <van-tabs :active="active" bind:change="onChange" @click="changeList" :sticky="true" :scroll-top="scrollTop" @change="activeChange">
        <van-tab title="综合">
            <ul class="goodsList" v-if="goodList.length>0">
                <li class="goods" v-for="(item,index) in goodList" :key="index">
                    <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
                    <div class="pic">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="msg">
                        <p class="scrip">{{item.goods_name}}</p>
                        <span class="goodsPrice">￥{{item.sell_price}}</span>
                        <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
                    </div>
                    </a>
                </li>
            </ul>
            <div v-else class="foundNot">
                <div v-if="loading">
                    <img src="/static/img/notFound.png" alt="">
                </div>
            </div>
        </van-tab>
        <van-tab title="人气">
            <ul class="goodsList" v-if="goodList.length>0">
                <li class="goods" v-for="(item,index) in goodList" :key="index">
                    <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
                    <div class="pic">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="msg">
                      <p class="scrip">{{item.goods_name}}</p>
                        <span class="goodsPrice">￥{{item.sell_price}}</span>
                        <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
                    </div>
                    </a>
                </li>
            </ul>
            <div v-else class="foundNot">
                <div v-if="loading">
                    <img src="/static/img/notFound.png" alt="">
                </div>
            </div>
        </van-tab>
        <van-tab title="价格排序" @click="priceList">
            <ul class="goodsList" v-if="goodList.length>0">
                <li class="goods" v-for="(item,index) in goodList" :key="index">
                    <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
                    <div class="pic">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="msg">
                      <p class="scrip">{{item.goods_name}}</p>
                        <span class="goodsPrice">￥{{item.sell_price}}</span>
                        <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
                    </div>
                    </a>
                </li>
            </ul>
            <div v-else class="foundNot">
                <div v-if="loading">
                    <img src="/static/img/notFound.png" alt="">
                </div>
            </div>
        </van-tab>
        <van-tab title="推荐指数">
            <ul class="goodsList" v-if="goodList.length>0">
                <li class="goods" v-for="(item,index) in goodList" :key="index">
                    <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
                    <div class="pic">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="msg">
                      <p class="scrip">{{item.goods_name}}</p>
                        <span class="goodsPrice">￥{{item.sell_price}}</span>
                        <span class="popular"><img src="/static/img/fire.png"><span>{{item.popularity}}</span></span>
                    </div>
                    </a>
                </li>
            </ul>
            <div v-else class="foundNot">
                <div v-if="loading">
                    <img src="/static/img/notFound.png" alt="">
                </div>
            </div>
        </van-tab>
    </van-tabs>
    </div>

<!-- </div> -->
</template>
<script>
    import request from '@/actions/request.js'
    import localStroage from '@/actions/localStorage.js'
    import goodsList from '@/components/home/goodsList'
    export default {
        name: "allGoods",
        components: {
        },
        data() {
            return {
                scrollTop:0,
                active:0,
                page:1,
                searchContent:'',
                list:1,
                type:1,
                data:{},
                goodList:[],
                loading:false,
                allPage:1,
                category_id:'',
                raise:true,
                types:''
            }
        },
      onShow(){
          this.goodList = [];

          let allGoodsACt = wx.getStorageSync("allGoodsAct");
        this.active = allGoodsACt;
          if (allGoodsACt){
            if (allGoodsACt === 3){

              request.allGoods('api/shop/allGoods','post',{type:5,page:this.page},{},true,this);
            } else{
              this.active = allGoodsACt;
              request.allGoods('api/shop/allGoods','post',{type:this.active,page:this.page},{},true,this);
            }
          } else{
            request.allGoods('api/shop/allGoods','post',{type:1,page:this.page},{},true,this);
          };
         /* wx.setStorageSync("allGoodsAct",);*/
      },
        onPageScroll(event) {
            this.scrollTop=event.scrollTop
        },
        onReachBottom() {
            if(this.page<this.allPage){
                this.page++;
                request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page},{},true,this);
            }else{

            }
        },
        methods:{
            changeList(){
              if (this.types == 2){
                this.raise = !this.raise;
                console.log(this.raise);
                if (this.raise){
                  this.goodList = [];
                  request.allGoods('api/shop/allGoods','post',{type:3,page:this.page},{},true,this);
                } else{
                  this.goodList = [];
                  request.allGoods('api/shop/allGoods','post',{type:4,page:this.page},{},true,this);
                };
              }
            },
            priceList(){

            },
            activeChange (e) {
                let index=e.mp.detail.index;
                wx.setStorageSync("allGoodsAct",index)
                this.page=1;
                this.data.list=[];
                this.type=index+1;
                this.goodList=[];
                this.types  = index;
              console.log(index);
              if (index === 2){

              }else if (index === 3){
                this.type = 5;
                request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page},{},true,this);
              } else{
                request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page},{},true,this);
              };
            },
        },
        mounted() {
          /*let allGoodsACt = wx.getStorageSync("allGoodsAct");
          if (allGoodsACt) {
            request.allGoods('api/shop/allGoods','post',{type:allGoodsACt,page:this.page},{},true,this);
          }else{
            request.allGoods('api/shop/allGoods','post',{type:this.type,page:this.page},{},true,this);
          };*/

        },
    }
</script>

<style scoped lang="scss">
.main-wrap{
    min-height: 100vh;
}
.foundNot{
    text-align: center;
    padding-top: 90px;
    img{
        width: 120px;
        margin-bottom: 20px;
    }
}
    .noteType{
        display: flex;
        justify-content: space-between;
        padding: 0 4vw;
        margin: 10px 0;
        .noteTypes:first-child{
            color: #FF4C50;

        }
        ul{
            display: flex;
            justify-content: space-between;
            width: 60px;
            font-size:12px;
        }
        span{
            font-size: 12px;
        }
    }
    .goodsType{
        display: flex;
        justify-content: space-around;
        font-size:12px;
        width: 100%;
        flex-wrap: wrap;
        margin: 10px 0;
        height: 50px;
        position: absolute;
        top: 0;
        z-index: 2;
        .goodsTypes:first-child{
            color:#FF4C50;
        }
    }
    .van-tabs__content{
        margin-top: 10px !important;
    }
    .noteList{
        display:flex;
        justify-content: space-between;
        padding: 4vw 4vw;
        flex-wrap: wrap;
        background: #f5f5f5;
        .notes{
            width:44vw;
            border-radius: 8px;
            background:#ffffff;
            .pic{
                height: 44vw;
                width: 44vw;
                line-height: 44vw;
                overflow: hidden;
                img{
                    width: 100%;

                }
            }
            .headIcon{
                width:25px;
                height: 25px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 5px;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;

                }
            }
            .msg{
                padding:8px 12px;
              .scrip{
                font-size: 14px;
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
                height: 11vw;
                overflow: hidden;
                width: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
            }

            .userName{
                vertical-align: middle;
                font-size:13px;
                color:#333333;
            }
            .title{
                width: 100%;
                height: 45px;
                font-size: 13px;
                color: #333333;
                line-height: 22px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                // padding: 0 12px;
            }
            .popular{
                float:right;
                img{
                    width:16px;
                    vertical-align: middle;
                    margin-right: 5px;
                }
                span{
                    font-size: 12px;
                    vertical-align: middle;
                }
            }
        }
    }
    .goodsList{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 4vw 4vw;
        background: #f5f5f5;
        .goods{
            width:44vw;
            border-radius: 8px;
            background:#ffffff;
            margin-bottom: 15px;
            .pic{
                height: 44vw;
                width: 44vw;
                line-height: 44vw;
                img{
                    width: 100%;
                  height: 100%;
                }
            }
            .headIcon{
                width:25px;
                height: 25px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 5px;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;

                }
            }
            .msg{
                padding:8px 12px;
              .scrip{
                font-size: 14px;
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
                height: 11vw;
                overflow: hidden;
                width: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
            }
            .goodsPrice{
                vertical-align: middle;
                font-size:14px;
                color:#FF4C50;
            }
            .title{
                width: 100%;
                height: 45px;
                font-size: 13px;
                color: #333333;
                line-height: 22px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                // padding: 0 12px;
            }
            .popular{
                float:right;
                img{
                    width:13px;
                    height: 13px;
                    vertical-align: middle;
                    margin-right: 2px;
                }
                span{
                    font-size: 12px;
                    color: #ff4081;
                    vertical-align: middle;
                }
            }
        }
    }
    .userList{
        padding: 12px 4vw;
        background: #f5f5f5;
        li{
            border-radius: 8px;
            background:#ffffff;
            padding:12px 22px 12px 12px;
        }
        .headIcon{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img{
                width: 100%;
            }

        }
        .userName{
            font-size: 14px;
        }
        .userId{
            color:#666666;
            font-size: 12px;
        }
        .contentBtn{
            height: 24px;
            width: 60px;
            text-align: center;
            line-height: 24px;
            background: #FF4C50;
            color: #ffffff;
            border-radius: 50px;
            vertical-align: middle;
        }
        .contentBtn1{
            height: 24px;
            width: 60px;
            text-align: center;
            line-height: 24px;
            background: #CCCCCC;
            color: #ffffff;
            border-radius: 50px;
            vertical-align: middle;
        }
        .note{
            line-height: 2em;
            color: #333333;
        }
    }

</style>
